<template>
  <div class="merchant alltable">
    <div class="tabbar">
      <div class="let">
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.startday"
          value = 'yyyy-MM-dd'
          placeholder="请选择开始日期"  
          style="width: 130px"
        ></DatePicker>&nbsp;
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.endday"
          placeholder="请选择结束日期"
          style="width: 130px"
        ></DatePicker>&nbsp;        
        <Input
          prefix="ios-search"          
          v-model.trim="data_axios.selectinfo"
          placeholder="请输入关键字"
          style="width: 200px"
        />
        <Button class="btn_default" @click="search">
          <Icon type="ios-search" size="17" class="icon_wy"/>查询
        </Button>
      </div>
        <div class='rit'>               
            <Button @click="add_business"><Icon type="ios-add-circle-outline" size="17" class="icon_wy"/>添加商户</Button>
      </div>
    </div>
    <div class="tabble">
      <div>
        <Table
          :columns="columns"
          :loading="loading"
          height="560"
          :data="data.datas"
          class="sel_table"
        ></Table>
      </div>
    </div>

    <div class="tab_pages">
      <Page
        :total="data.allCount"
        :page-size="data_axios.pagesize"
        :current.sync="data_axios.pagenumber"
        show-total
        @on-change="merchant_data"
      ></Page>
    </div>
    <!-- 添加商户  -->
        <Modal title="添加商户" v-model="model2" class-name="" :mask-closable="false">
            <div>
              <Form  ref="add_data"  label-position="left" :model="add_data" :rules="ruleValidate1" :label-width="100">            
                <FormItem label="商户名" prop="cname">
                    <Input v-model="add_data.cname" placeholder="请输入商户名"></Input>
                </FormItem>
                <FormItem label="经营者名字" prop="mname" >
                    <Input v-model="add_data.mname" placeholder="请输入经营者名字"></Input>
                </FormItem>
                <FormItem label="餐厅名">
                    <Input v-model="add_data.rname" placeholder="请输入餐厅名"></Input>
                </FormItem>
                <FormItem label="档口号">
                    <Input v-model="add_data.wcode" placeholder="请输入档口号"></Input>
                </FormItem>
                <FormItem label="电话" prop='tel'>
                    <Input v-model="add_data.tel" placeholder="请输入电话"></Input>
                </FormItem>
                <FormItem label="身份证" prop='identity'>
                    <Input v-model="add_data.identity" placeholder="请输入身份证"></Input>
                </FormItem>
                <FormItem label="费率" prop='rate'>                
                    <InputNumber :max="1" :min="0" :step='0.01' :precision='2' style="width:100%"  v-model="add_data.rate"  placeholder="请输入费率"></InputNumber>
                </FormItem>
                <FormItem label="开户行" prop='bank'>
                    <Input v-model="add_data.bank" placeholder="请输入开户行"></Input>
                </FormItem>
                <FormItem label="银行卡号" prop='bcode'>
                    <Input v-model="add_data.bcode" placeholder="请输入银行卡号"></Input>
                </FormItem>                     
             </Form> 
            </div>
            <div slot="footer">
                <Button size="large"  @click="model2=false">关闭</Button>
                <Button type="primary" @click="handleSubmit1(add_data)" size="large" :loading="add_modal_loading">确定添加</Button>
            </div>
        </Modal>
    <!-- 修改商户  -->
        <Modal title="修改商户" v-model="model1" class-name="" :mask-closable="false">
            <div>
              <Form  ref="fix_data"  label-position="left" :model="fix_data" :rules="ruleValidate" :label-width="100">            
                <FormItem label="商户名" prop="cname">
                    <Input v-model="fix_data.cname" placeholder="请输入商户名"></Input>
                </FormItem>
                <FormItem label="经营者名字" prop="mname" >
                    <Input v-model="fix_data.mname" placeholder="请输入经营者名字"></Input>
                </FormItem>
                <FormItem label="餐厅名" >
                    <Input v-model="fix_data.rname" placeholder="请输入餐厅名"></Input>
                </FormItem>
                <FormItem label="档口号">
                    <Input v-model="fix_data.wcode" placeholder="请输入档口号"></Input>
                </FormItem>
                <FormItem label="电话" prop='tel'>
                    <Input v-model="fix_data.tel" placeholder="请输入电话"></Input>
                </FormItem>
                <FormItem label="身份证" prop='identity'>
                    <Input v-model="fix_data.identity" placeholder="请输入身份证"></Input>
                </FormItem>
                <FormItem label="费率" prop='rate'>               
                    <InputNumber :max="1" :min="0" :step='0.01' :precision='2' style="width:100%"  v-model="fix_data.rate"  placeholder="请输入费率"></InputNumber>
                </FormItem>
                <FormItem label="开户行" prop='bank'>
                    <Input v-model="fix_data.bank" placeholder="请输入开户行"></Input>
                </FormItem>
                <FormItem label="银行卡号" prop='bcode'>
                    <Input v-model="fix_data.bcode" placeholder="请输入银行卡号"></Input>
                </FormItem>   
                               
             </Form> 
            </div>
            <div slot="footer">
                <Button size="large"  @click="model1=false">关闭</Button>
                <Button type="primary" @click="handleSubmit(fix_data)" size="large" :loading="fix_modal_loading">确定修改</Button>
            </div>
        </Modal>
  </div>
</template>
<script>
import { setAdmin, setToken, getAdmin } from "../../../utils/auth.js";
import { selectMchList,updateMchInfo ,addMch} from "../../../apis/api_system.js";
import filter from './../../../filters/filter';
import { validatePhone ,validateIdnumber} from "../../../utils/validate.js";
export default {
  name: "bus_listing",
  data() {
    return {
      userId: "",
      model1: false,
      model2: false,
      fix_modal_loading:false,
      add_modal_loading:false,
      value: "",
      userName:"",
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],        
      },
      data_axios: {
        startday:"",
        endday: "",
        pagesize: 10,
        pagenumber: 1,        
        selectinfo: "",        
      },
      fix_data:{
      },
      add_data:{
          rate:0
      },
      loading: false,
      Mnamelist: [],
      typelist: [
        {
          mid: 0,
          cname: "商户下单"
        },
        {
          mid: 1,
          cname: "扫码"
        }
      ],
      //   1 2已退款
      billstatuslist: [
        {
          mid: 1,
          cname: "已完成"
        },
        {
          mid: 2,
          cname: "已退款"
        }
      ],
      columns: [
        {
          title: "序号",
          key: "name",
          type: "index",
          width: 50
        },
        {
          title: "商户名",
          key: "cname"
        },
        {
          title: "商户号",
          key: "mid"
        },
        {
          title: "经营者人名",
          key: "mname",
        //    width: 100
        },
        {
          title: "餐厅名",
          key: "rname"
        },
        {
          title: "档口号",
          key: "wcode",
        //   width: 100
        },
        {
          title: "电话",
          key: "tel"
        //   ,
        //   width: 100
        },        
        
        {
          title: "身份证号",
          key: "identity",
        //    width: 200
        },
        {
          title: "创建时间",
          key: "createdate",
            // width: 150
        },
        {
          title: "手续费",
          key: "rate"
        },
        {
          title: "开户行",
          key: "bank"
        },
        {
          title: "银行卡号",
          key: "bcode",
        //   width: 100,          
        },
        
        {
          title: "操作",
          key: "",
         
          render: (h, params) => {
            let self = this;
            return (
              <div class="lastcoll">
                <i
                  on-click={() => self.setmodal_edit(params)}
                  class="ivu-icon ivu-icon-ios-create-outline icon_weight"
                  title="修改"
                >
                  修改
                </i>
                
              </div>
            //   <i
            //       on-click={() => self.del(params)}
            //       class="ivu-icon ivu-icon-ios-trash-outline icon_weight"
            //       title="删除"
            //     >
            //       删除
            //     </i>
            );
          }
        }
      ],
      ruleValidate: {
        //   不能为空
        cname: [
            { required: true, message: '商户名不能为空', trigger: 'change' }
        ],
        mname: [
            { required: true, message: '经营者名字不能为空', trigger: 'change' },
            
        ],
        rname: [
            { required: true, message: '餐厅名不能为空', trigger: 'change' }
        ],
        wcode: [
            { required: true, message: '档口号不能为空', trigger: 'change' }
        ],
        tel: [
            { required: true, message: '电话号码不能为空', trigger: 'change' },
            {validator: (rule, value, callback) => {
              if (validatePhone(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            }}
        ],
        identity: [
            { required: true,  message: '身份证不能为空', trigger: 'change' },
            {validator: (rule, value, callback) => {
              if (validateIdnumber(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的身份证号"));
              }
            }}
            
        ],
        rate: [           
            { required: true, type:"number", message: '费率不能为空', trigger: 'change' }
        ],        
        bank: [
            { required: true, message: '开户行不能为空', trigger: 'change' },            
        ],
        bcode: [
            { required: true, message: '银行卡号不能为空', trigger: 'change' },            
        ]
      },
      ruleValidate1: {
        //   不能为空
        cname: [
            { required: true, message: '商户名不能为空', trigger: 'change' }
        ],
        mname: [
            { required: true, message: '经营者名字不能为空', trigger: 'change' },
            
        ],
        rname: [
            { required: true, message: '餐厅名不能为空', trigger: 'change' }
        ],
        wcode: [
            { required: true, message: '档口号不能为空', trigger: 'change' }
        ],
        tel: [
            { required: true, message: '电话号码不能为空', trigger: 'change' },
            {validator: (rule, value, callback) => {
              if (validatePhone(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            }}
        ],
        identity: [
            { required: true,  message: '身份证不能为空', trigger: 'change' },
            {validator: (rule, value, callback) => {
              if (validateIdnumber(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的身份证号"));
              }
            }}
            
        ],
        rate: [           
            { required: true, type:"number",  message: '费率不能为空', trigger: 'change' }
        ],        
        bank: [
            { required: true, message: '开户行不能为空', trigger: 'change' },            
        ],
        bcode: [
            { required: true, message: '银行卡号不能为空', trigger: 'change' },            
        ]
      }
    };
  },
  
  mounted() {    
    let info = getAdmin();   
    this.userId = info.id;
    this.userName = info.name;        
    this.selectMchList(this.data_axios);
  },
  methods: {  
      
    //   获取商户列表
    selectMchList(info) {     
        this.loading = true; 
       if(this.data_axios.startday!=''){
          this.data_axios.startday =  filter.FileterDate(this.data_axios.startday);
       }
       if(this.data_axios.endday!=''){
          this.data_axios.endday =  filter.FileterDate(this.data_axios.endday);
       }      
      let data = JSON.stringify({
        requestString: JSON.stringify(info),
        userId: this.userId,
        fullname: "商户列表"
      });
      selectMchList(data).then(({ returnString, code, disp ,count}) => { 
          this.loading = false;
          if (code == 200) {    
            //  console.log(JSON.parse(returnString));
            this.data.datas = JSON.parse(returnString);
            this.data.allCount = count;
            // console.log(this.data.allCount)
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {
            this.$Message.warning('请求出错');
        });
    },
    //   添加商户
    add_business() {
        this.model2 = true;
    },
    //分页改变
    merchant_data() {
       this.selectMchList(this.data_axios);
    },
    search(){
      this.data_axios.pagenumber=1;
      this.selectMchList(this.data_axios);
    },
    // // 删除
    // del(params) {
    //   this.$Modal.confirm({
    //     title: "确认提醒",
    //     content: "<p>确认删除这条商户信息？</p>",
    //     onOk: () => {
    //       //   this.deleteHrpEmployee(params);
    //     }
    //   });
    // },

    // 修改
    setmodal_edit(params) {      
        this.fix_data = params.row;
        this.model1 =true;   
    },
    handleSubmit(name){      
       this.$refs["fix_data"].validate(valid => {
        if (valid) {
           this.fix_modal_loading =true;
           this.updateMchInfo();
        }
      });      
    },
    // 修改商户
    updateMchInfo(){    
        this.fix_data.modifyuserid = this.userId;
        this.fix_data.modifyusername = this.userName; 
        let data = JSON.stringify({
            requestString: JSON.stringify(this.fix_data),
            userId: this.userId,
            fullname: "商户列表"
        });
        updateMchInfo(data).then(({ returnString, code, disp }) => { 
          this.fix_modal_loading = false;          
          if (code == 200) {  
            this.$Message.success(disp);
            this.selectMchList(this.data_axios);
            this.model1 =false; 
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {
             this.$Message.warning('请求出错');
        });
    },
    // 增加
    handleSubmit1(name){     
      this.$refs["add_data"].validate(valid => {
            if (valid) {
            this.add_modal_loading =true;
            this.addMch();
            }
        });
    },
    // 增加商户
    addMch(){
        this.add_data.createuser = this.userId;
        this.add_data.createusername = this.userName; 
        let data = JSON.stringify({
            requestString: JSON.stringify(this.add_data),
            userId: this.userId,
            fullname: "商户列表"
        });
        addMch(data).then(({ returnString, code, disp }) => { 
            this.add_modal_loading = false;     
            debugger     
            if (code == 200) {  
                this.$Message.success(disp);
                this.selectMchList(this.data_axios);
                this.model2 =false; 
            } else {            
                this.$Message.warning(disp);
            }
            })
            .catch(err => {
                 this.$Message.warning('请求出错');
            });
    }
  }
};
</script>